<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

    var zhang = {
        name:"张三",
        class:"2111",
        age:18,
        sex:"男",
        height:"178cm",
        weight:"70kg",
    }
    // var name = zhang.name; //太麻烦


    // 对象解构 (对应键名解构)
    // 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    // 1. 对应键名解构(最简单的解构)
    var {name,age,sex,height,weight} = zhang;
    var {sex,height,name,age,weight} = zhang;
    // console.log(name,age,sex,height,weight);

    // 可以理解为
    // var {name,age,sex,height,weight} = zhang;
    // var {name:name,age:age,sex:sex,height:height,weight:weight} = {
    //     name:"张三",
    //     age:18,
    //     sex:"男",
    //     height:"178cm",
    //     weight:"70kg",
    // };


    // 2. 自定义变量名
    // var {name,age,class:_class,sex,height,weight} = zhang;
    // console.log(_class);
    
    // var {name:a,age:b,class:c,sex:d,height:e,weight:f} =  {
    //     name:"张三",
    //     class:"2111",
    //     age:18,
    //     sex:"男",
    //     height:"178cm",
    //     weight:"70kg",
    // };
    // console.log(a,b,c,d,e,f);



    // var obj = {a:1,b:2,c:3};
    // var {a,b,c} = {a:1,b:2,c:3};
    // console.log(a,b,c);

    // var {a,c} = {a:1,b:2,c:3};
    // console.log(a,c);

    // 如果解构不成功，变量的值就等于undefined。
    // var {a,b,c,d} = {a:1,b:2,c:3};
    // console.log(a,b,c,d);

    // 在解构过程中,可以设置变量的默认值 (如果取不到就使用默认值 去得到就对应赋值)
    // var {a,b,c,d = 0} = {a:1,b:2,c:3,d:null};
    // // d = d === undefined ? 0 : d;
    // console.log(a,b,c,d);

    // 注意: 对象解构不能解构null 和undefined
    // var {a,toFixed,toString} = 1;  // new Number(1)
    // console.log(a,toFixed,toString);

    // var {a} = null;  // 报错
    // console.log(a,toFixed,toString);


    // 对于复杂的对象数据 如何解构?    对应键名 解构键值
    var zhang = {
        name:"张三",
        class:"2111",
        age:18,
        sex:"男",
        grade:{
            chinese:55,
            math:66,
            english:77,
        },
        hobby:["唱歌","跳舞","弹钢琴"],
    }

    // var {name,class:cls,age,sex,grade,hobby} = zhang;
    // console.log(name,cls,age,sex,grade,hobby);

    // var {chinese,math,english} = grade;
    // console.log(chinese,math,english);

    // var [a,b,c] = hobby;
    // console.log(a,b,c);


    // 简写
    // var {name,class:cls,age,sex,grade:grade,hobby:hobby} = zhang;

    // 对应键名 解构键值
    var {name,class:cls,age,sex,grade:{chinese,math,english},hobby:[a,b,c]} = zhang;
    console.log(name,cls,age);
    console.log(chinese,math,english);
    console.log(a,b,c);


    // var {
    //     name,
    //     class:cls,
    //     age,
    //     sex,
    //     grade:{
    //         chinese,
    //         math,
    //         english
    //     },
    //     hobby:[a,b,c]} = zhang;

    var {
        name:a,
        class:b,
        age:c,
        sex:d,
        grade:{
            chinese:e,
            math:f,
            english:g,
        },
        hobby:[h,i,j],
    } = zhang;






</script>
</html>